<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入vue</title>
   <script src="vue.min.js"></script>
</head>
<body>
<div style="text-align: center;"> 


    <!-- 1.1 -->

    <div id="app">
    {{message}}
    </div>
    
   <script>
         var exam={
           message:"欢迎！！！！！！！！！！！！！"
       };
       var vm=new Vue({
           el:"#app",
           data:exam
       });

   </script>



<!-- 1.2 -->

   <!-- 创建一个vew -->
   <div id="app1">
        <p>{{mes}}</p>
        <input type="text" v-model="mes">
   </div>

    <!-- 创建一个model -->
    <script>
        var a={
            mes:"你好！！！"
        };
        // 创建一个vue实例
        var vm1=new Vue({
            el:"#app1",
            data:a
        });

    </script>

<!-- 1.2.3 -->
<div id="app2">
    <fieldset>
        <legend>哈喽</legend>
       <p>姓：<input type="text" v-model="xing"></p>
       <p>名：<input type="text" v-model="ming"></p>
       
    </fieldset>
    <p> 你好：{{xing}}{{ming}}</p>
    <script>
        new Vue({
            el:"#app2",
            data: {
                xing:"王",
                ming:"五"
            }
        })
    </script>
</div>

<!-- 生命周期 -->
<div id="as">
    {{mages}}
</div>
<script>
    new Vue({
        el:"#as",
        data:{
            mages:"生命周期"
        },
        created () {
            console.log("我是创建过程");
        },
        mounted () {
            console.log("我是执行过程");
        }
    })
</script>

<div id="asd" style="background-color:teal; text-align:center;border-radius:10px;color:ivory">
    <h1>{{Title}}</h1>
</div>
<script>
    new Vue({
        el:"#asd",
        data:{
            my:[],
            index:0,
            Title:""
        },
        created(){
            this.my=[
                "北京第三交通委提醒您",
                "道路千万条",
                "安全第一条",
                "行车不规范",
                "亲人两行泪"
            ];
            this.Title=this.my[0];
        },
        mounted () {
           //声明一个变量指向vue实例，保证作用域一致
           var _this=this;
            this.timer=setInterval(function () {
                if(_this.index<_this.my.length-1){
                    _this.index++;
                }else{
                    _this.index=0;
                };
            _this.Title=_this.my[_this.index];
            },1000);
        },
        beforeDestroy () {
            if(this.timer){
                clearInterval(this.timer)
            }
        }
    });
</script>
<div id="time" style="color:dodgerblue">
   <h2> {{showText|test}}</h2>
</div>
<script>
    new Vue({
        el:"#time",
        data:{
            showText:null
        },
        created(){
            this.showText=new Date();
        },
        mounted(){
            var _this=this;
            setInterval(() => {
                _this.showText=new Date;
            }, 1000);
        },
        filters: {
            test:function(val){
                return "当前时间:"+new Date(val).toLocaleString();
            }
        }
    })
</script>
</div>
</body>
</html>